<template>
    <!-- 
      v-for 遍历对象：
      语法：v-for="(value, name) in user"
        - value：当前属性的值
        - name：当前属性的名称（键名）
        - user：要遍历的对象
      
      :key 属性：
        - 此处使用属性名name作为key
        - 因为对象属性名是唯一的，适合作为标识
    -->
    <div v-for="(value, name) in user" :key="name">
        <!-- 显示属性名和对应的属性值 -->
        {{name}}：{{value}}
    </div>
</template>

<script setup>
// 导入reactive函数，用于创建响应式对象
import { reactive } from 'vue'

// 创建响应式对象user，包含id、name、gender三个属性
// reactive会使对象的所有属性都具有响应性
const user = reactive({
    id: 11, 
    name: '张三', 
    gender: '男'
})

/* 
  对象遍历要点：
  1. 遍历对象时，v-for的第一个参数是属性值(value)，第二个参数是属性名(name)
  2. 遍历顺序基于对象属性的枚举顺序（ES6+规范）
  3. 适合展示对象的键值对信息，如用户信息、配置项等
  4. 当对象的属性值发生变化，或添加/删除属性时，视图会自动更新
  5. 使用属性名作为key是安全的，因为对象属性名具有唯一性
*/
</script>
    